{% block sw_multi_tag_select %}
<sw-select-base
    class="sw-multi-tag-select"
    :is-loading="isLoading"
    :error="errorObject"
    :disabled="disabled"
    v-bind="$attrs"
    @select-expanded="setDropDown(true)"
    @select-collapsed="setDropDown(false)"
>
    {% block sw_multi_tag_select_base %}
    {% block sw_multi_tag_select_base_selection %}
    <template #sw-select-selection="{ identification, error, disabled, size, expand, collapse }">
        {% block sw_multi_tag_select_base_selection_slot %}
        <sw-select-selection-list
            ref="selectionList"
            :selections="visibleValues"
            :invisible-count="invisibleValueCount"
            :disabled="disabled"
            label-property="value"
            value-property="value"
            v-bind="{ size, placeholder, searchTerm }"
            @total-count-click="expandValueLimit"
            @item-remove="remove"
            @last-item-delete="removeLastItem"
            @search-term-change="onSearchTermChange"
            @key-down-enter="onSelectionListKeyDownEnter"
        >
            {% block sw_multi_tag_select_base_selection_list %}
            {% block sw_multi_tag_select_base_selection_list_label %}
            <template #label-property="{ item, index, labelProperty, valueProperty }">
                {% block sw_multi_tag_select_base_selection_list_label_inner %}
                <slot
                    name="selection-label-property"
                    v-bind="{ item, index, labelProperty, valueProperty}"
                >
                    {{ getKey(item, labelProperty) }}
                </slot>
                {% endblock %}
            </template>
            {% endblock %}
            {% endblock %}
        </sw-select-selection-list>
        {% endblock %}
    </template>
    {% endblock %}
    {% endblock %}

    {% block sw_multi_tag_select_validation %}
    <template #results-list>
        <div
            v-if="hasFocus"
            class="sw-multi-tag-select-validation sw-select-result-list"
        >
            <sw-popover
                class="sw-select-result-list-popover"
                popover-class="sw-multi-tag-select-validation-popover"
                :z-index="1100"
                :resize-width="true"
            >
                <div class="sw-select-result-list__content">
                    {% block sw_multi_tag_select_validation_valid %}
                    <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
                    <div
                        v-if="inputIsValid"
                        class="sw-multi-tag-select-valid"
                        @click="addItem"
                    >
                        {% block sw_multi_tag_select_validation_valid_message %}
                        <slot name="message-add-data">
                            <span>{{ $tc('global.sw-multi-tag-select.addData') }}</span>
                        </slot>
                        {% endblock %}
                    </div>
                    {% endblock %}

                    {% block sw_multi_tag_select_validation_invalid %}
                    <div
                        v-else
                        class="sw-multi-tag-select-invalid"
                    >
                        {% block sw_multi_tag_select_validation_invalid_message %}
                        <slot name="message-enter-valid-data">
                            <span>{{ $tc('global.sw-multi-tag-select.enterValidData') }}</span>
                        </slot>
                        {% endblock %}
                    </div>
                    {% endblock %}
                </div>
            </sw-popover>
        </div>
    </template>
    {% endblock %}

    <template #label>
        <slot name="label"></slot>
    </template>

    <template #hint>
        <slot name="hint"></slot>
    </template>
</sw-select-base>
{% endblock %}
